<template>
    <div>
    <Header ></Header>
    <Nav></Nav>
    <span class="headertitle">审批事项</span>
        <el-card class="box-card">
            <el-card class="tab" shadow="hover">
                <img src="@/assets/images/专家@2x.png" alt="">
                <span>专家1</span>
                <el-link type="primary" @click="dialogVisible = true">修改密码</el-link>
            </el-card>
            <el-card class="tab" shadow="hover">
                <img src="@/assets/images/专家@2x.png" alt="">
                <span>专家2</span>
                <el-link type="primary" @click="dialogVisible = true">修改密码</el-link>
            </el-card>
            <el-card class="tab" shadow="hover">
                <img src="@/assets/images/专家@2x.png" alt="">
                <span>专家3</span>
                <el-link type="primary" @click="dialogVisible = true">修改密码</el-link>
            </el-card>
            <el-card class="tab" shadow="hover">
                <img src="@/assets/images/专家@2x.png" alt="">
                <span>专家4</span>
                <el-link type="primary" @click="dialogVisible = true">修改密码</el-link>
            </el-card>
            <el-card class="tab" shadow="hover">
                <img src="@/assets/images/专家@2x.png" alt="">
                <span>专家5</span>
                <el-link type="primary" @click="dialogVisible = true">修改密码</el-link>
            </el-card>
            <el-card class="tab" shadow="hover">
                <img src="@/assets/images/专家@2x.png" alt="">
                <span>专家6</span>
                <el-link type="primary" @click="dialogVisible = true">修改密码</el-link>
            </el-card>
            <el-card class="tab" shadow="hover">
                <img src="@/assets/images/专家@2x.png" alt="">
                <span>专家7</span>
                <el-link type="primary" @click="dialogVisible = true">修改密码</el-link>
            </el-card>
        </el-card>
        <el-dialog
          title="修改密码"
          :visible.sync="dialogVisible"
          width="30%">
            <el-form  label-width="80px">
                <el-form-item label="专家名称">
                  <el-input style="width:300px" disabled placeholder="专家N"></el-input>
                </el-form-item>
                <el-form-item label="设置密码">
                  <el-input v-model="pasword" style="width:300px" placeholder="请设置密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">重置密码</el-button>
                </el-form-item>
            </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">保 存</el-button>
            <el-button type="primary" @click="dialogVisible = false">发 布</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Nav from '@/components/Nav.vue'

export default {
    data(){
        return {
            dialogVisible:false,
            username:'专家',
            pasword:'123456'
        }
    },
    components:{
    Header,
    Nav
    },
    methods:{

    }
}

</script>

<style lang="less" scoped >
    .box-card{
        width: 91%;
        height: 800px;
        float: right;
        margin-right: 1%;
        margin-top: -43%;
        border-radius: 2%;
        font-weight: 700;
    }

    .tab{
        float: left;
        width: 250px;
        margin-left: 20px;
        margin-top: 15px;
        position: relative;
        span{
            position: absolute;
            margin-top: 10px;
            margin-left: 15px;
        }
        a{
            color:#91adfa;
            float: right;
            margin-top: 10px;
        }
    }
    body{
  position: relative;
}
.headertitle{
  position: absolute;
  top: 0;
  z-index: 999;
  margin-top: 20px;
  margin-left: 180px;
  font-size: 16px;
}
</style>